<template>
    <div>
        <!-- 轮播图 区域 -->
        <mt-swipe :auto="4000">
            <!-- 在组件中使用v-for循环的话，一定要使用 key -->
            <!-- 将来是使用此轮播图组件，谁为我们传递 lunbotuList -->
            <!-- 此时，lunbotulist 应该是 父组件向子组件传值来设置 -->
            <mt-swipe-item v-for="item in lunbotulist" :key="item.pid">
               <img :src="item.url" alt="" :class="{full:isfull}">
            </mt-swipe-item>
        </mt-swipe>
    </div>

    <!--  分析： 因为不同模块中调用一个轮播有时候需要的样式不同
            在首页中需要宽度和高度 都是100% 适应全屏
            但是在商品详情页中的轮播图如果也全屏不好看
            可以定义一个属性，让使用轮播图的调用者 手动指定 是否为 100% 的宽度
            1. 定义一个class 属性 full 样式为 width: 100%; 
            2. 给需要添加轮播面板的页面组件中的 swiper 中添加一个属性 
                +  :isfull="false"
                +  <swiper :lunbotulist="lunbotuList" :isfull="false"></swiper>  这是首页
                +  
            3.  给 轮播的 img 属性添加  :class="{full:isfull}"
            4. 如果 full 是 true 则添加full的class 如果是false 则不显示full的class

     -->




</template>
<script>

    export default{
       data(){
           return{
           }
       }, 
       created() {
        },
       methods:{
       },
       props:["lunbotulist",'isfull']
    }

</script>

<style lang="scss" scoped>
.mint-swipe {
  height: 210px;
    // 给每个轮播图增加不同背景颜色
    // .mint-swipe-item:nth-child(1){
    //     background-color: red;
    // }
    // .mint-swipe-item:nth-child(2){
    //     background-color:rgb(229, 255, 0);
    // }
    // .mint-swipe-item:nth-child(3){
    //     background-color: rgb(0, 153, 255);
    // }
    // 设置轮播图的宽高
    .mint-swipe-item {
        text-align: center;
        img {
            height: 100%;
        }
    }
}

.full{
    width: 100%;
}

</style>

